<template>
	<view class="box-border">
		<!-- <u-sticky bgColor="#fff">
			<u-tabs :list="title" :scrollable='false' @click="click"></u-tabs>
		</u-sticky> -->
		<view class="live-list page box-border ">
			<view class="title">
				视频教程
			</view>
			<view class="">
				<video :src="liveList.video" class="video"></video>
			</view>
			<view class="title" v-if="liveList.pics.length!=0">
				图片说明
			</view>
			<view class="" v-for="(item,index) in liveList.pics" @click="seeImg(liveList.pics,index)">
				<image :src="item.img" mode=""></image>
			</view>
		</view>
		<u-empty text="暂无列表哦~~" mode="list" v-if="liveList==null" margin-top='50'></u-empty>
	</view>
</template>

<script>
	import {
		course
	} from '@/request/api.js'
	export default {
		data() {
			return {
				liveList: null,
				last_page: 1,
				page: 1
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				course({
					page: this.page
				}).then(res => {
					// console.log(res)
					if (res.code == 1) {
						this.liveList = res.data
						console.log(this.liveList)
					}


				})
			},
			seeImg(e,index) {
				// console.log(e)
				let photoList = e.map(item => { // item 获取到的图片地址
							return item.img;
						});
				uni.previewImage({
					current: index,
					urls: photoList, // 需要预览的图片列表，photoList要求必须是数组
					loop:true
				})
			}
		},
		onReachBottom() {
			// if (this.page < this.last_page) {
			// 	this.getList()
			// }
		}
	}
</script>
<style>
	page {
		background-color: #f6f6f6;
	}
</style>
<style lang="scss" scoped>
	.title-au {
		line-height: 34upx;
		color: #FFFFFF;
		position: absolute;
		left: 20upx;
		top: 80%;
		width: calc(100% - 40upx);
		font-size: 28upx;
	}

	.title-n {
		position: absolute;
		left: 20upx;
		bottom: 30%;
		width: calc(100% - 40upx);
		line-height: 40upx;
		color: #FFFFFF;
	}

	.pt-ab {
		width: 130upx;
		height: 50upx;
		left: 0upx;
		top: 50upx;
		border-radius: 0 25upx 25upx 0;
		z-index: 9;
		background: linear-gradient(270deg, #F8A470 0%, #F3DDA2 100%);

		image {
			width: 26upx;
			height: 26upx;
			margin-left: 10upx;
			margin-right: 10upx;
		}

		font-style: normal;
		font-size: 24upx;
		color: #FFFFFF;
	}

	.live-list {
		color: #505050;
		display: flex;
		justify-content: left;
		align-items: left;
		flex-direction: column;

		.title {
			margin-bottom: 20px;
			margin-top: 20rpx;
		}

		.video {
			width: 100%;
		}

		image {
			width: 100%;
		}

	}

	.live-img {
		width: 100%;
		height: 400upx;
		border-radius: 16upx;
		aspect: ratio 4upx / 3upx;
	}

	.title-item {
		color: $title-color;
	}

	.active {
		color: $common-color !important;
		position: relative;
	}

	.active::after {
		content: '';
		position: absolute;
		background: $common-color;
		width: 70upx;
		height: 2upx;
		bottom: -10upx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 40upx;
	}

	.current {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		text-align: center;
	}
</style>
